<template>
    <div class="onepicture">
        <div class="containerleft">
            <div class="todaynotdispose">
                <div class="texttitle">今日未处理预警（0）</div>
                <div class="iconbottom">
                    <div class="item" v-for="(item, i) in imgitems" :key="i">
                        <div class="left">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="right">
                            <div class="righttop" :style="{ color: item.color }">{{ item.number }}</div>
                            <div class="rightbottom">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="disastertype">
                <div class="contianer">
                    <div class="contianerleft">
                        <div class="item" v-for="(item, i) in disastertypes" :key="i">
                            <div class="left">
                                <img :src="item.img" alt="灾害类型">
                            </div>
                            <div class="right">
                                <div class="righttop">{{ item.number }}</div>
                                <div class="rightbottom">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="contianerright">
                        <img src="@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/切换.png" alt="">
                    </div>
                </div>
            </div>
            <div class="location">
                <div class="scrollbar-container">
                    <div class="item" v-for="(item, i) in disasterpercents" :key="i">
                        <div class="leftname">{{ item.name }}</div>
                        <div class="rightpercent">
                            <el-progress define-back-color="#1BC8B7" :show-text="false" :stroke-width="10"
                                :percentage="item.percent"></el-progress>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="containerright">
            <div class="top">
                <div class="circularprogressbar">
                    <el-progress text-color="#1BC8B7" color="#1BC8B7" type="circle" :width="110" :stroke-width="10"
                        :percentage="deviceOnline.total? rightdevicePercent:0"></el-progress>
                    <div class="title">在线</div>
                </div>
                <div class="onlinenumber">
                    <div class="topnumber" style="font-size: 24px; font-family: DIN;font-weight: bold;color: #1BC8B7;">
                        {{ deviceOnline.online }}
                    </div>
                    <div class="text" style="font-size: 16px;font-family: Source Han Sans CN;font-weight: 400;color: #B8D2D5;margin-top: 5px;">
                        在线
                    </div>
                </div>
                <div class="line" style="width:1px;height:80px;background-color: #438690;"></div>
                <div class="unlinenumber">
                    <div class="topnumber" style="font-size: 24px;font-family: DIN;font-weight: bold;color: #1BC8B7;">
                        {{ deviceOnline.offline }}
                    </div>
                    <div class="text" style="font-size: 16px;font-family: Source Han Sans CN;font-weight: 400;color: #B8D2D5;margin-top: 5px;">
                        离线
                    </div>
                </div>
            </div>
            <div class="middle">
                <div class="middleitem1">
                    <div class="leftcir">
                        <el-progress text-color="#0096FF" :width="80" type="circle" :stroke-width="3"
                            :percentage="routingResult.dayTotal?todayroutingPercent:0"></el-progress>
                        <div class="title">正常</div>
                    </div>
                    <div class="rightnumber">
                        <div class="numbertop">今日巡检</div>
                        <div class="numberbottom" style="margin-top:10px">
                            <div class="bottomitem">巡检正常: <span style="color:#1BC6B6">{{routingResult.dayNormal}}</span> </div>
                            <div class="bottomitem">巡检总数: <span style="color:#1BC6B6;margin-right: 30px;">{{routingResult.dayTotal}}</span> </div>
                        </div>
                    </div>
                </div>
                <div class="middleitem2">
                    <div class="leftcir">
                        <el-progress text-color="#1BC8B7" color="#1BC8B7" :width="80" type="circle" :stroke-width="3"
                            :percentage="routingResult.weekTotal?weekroutingPercent:0"></el-progress>
                        <div class="title">正常</div>
                    </div>
                    <div class="rightnumber">
                        <div class="numbertop">本周巡检</div>
                        <div class="numberbottom" style="margin-top:10px">
                            <div class="bottomitem">巡检正常: <span style="color:#1BC6B6">{{routingResult.weekNormal}}</span> </div>
                            <div class="bottomitem">巡检总数: <span style="color:#1BC6B6;margin-right: 30px;">{{routingResult.weekTotal}}</span> </div>
                        </div>
                    </div>
                </div>
                <div class="middleitem3">
                    <div class="leftcir">
                        <el-progress text-color="#7069E1" color="#7069E1" :width="80" type="circle" :stroke-width="3"
                            :percentage="routingResult.monthTotal?monthroutingPercent:0"></el-progress>
                        <div class="title">正常</div>
                    </div>
                    <div class="rightnumber">
                        <div class="numbertop">本月巡检</div>
                        <div class="numberbottom" style="margin-top:10px">
                            <div class="bottomitem">巡检正常: <span style="color:#1BC6B6">{{routingResult.monthNormal}}</span> </div>
                            <div class="bottomitem">巡检总数: <span style="color:#1BC6B6;margin-right: 30px;">{{routingResult.monthTotal}}</span> </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="box">
                    <div class="heightbox">
                        <div class="heightboxtop">
                            <div class="type">序号</div>
                            <div class="type">类型</div>
                            <div class="type">数量</div>
                            <div class="type">占比</div>
                        </div>
                        <div class="heightboxbottom">
                            <div class="info" v-for="(item, i) in monitorTypes" :key="i">
                                <div class="serialnumber">{{ item.serial }}</div>
                                <div class="types">{{ item.type }}</div>
                                <div class="number">{{ item.number }}</div>
                                <div class="percent">{{ item.percent }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import request from '@/utils/http'
import onepicture from '@/api/onepicture';
import { error } from 'highcharts';
export default {
    name: '',
    data() {
        return {
            percentage: 85,
            // 今日未处理预警
            imgitems: [
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/红色预警.png'), name: '红色预警', number: '0', color: 'red' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/橙色预警.png'), name: '橙色预警', number: '0', color: 'orange' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/黄色预警.png'), name: '黄色预警', number: '0', color: 'yellow' },
                { img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/蓝色预警.png'), name: '蓝色预警', number: '0', color: 'blue' },
            ],
            // 灾害类型
            disastertypes: [

            ],
            // 灾害点占比
            disasterpercents: [
                
            ],
            //右侧头部监测在线率
            deviceOnline:{

            },
            // 右侧下边栏监测类型占比
            monitorTypes: [
                
            ],
            //巡检结果
            routingResult:{}
        };
    },
    computed:{
        // 右侧头部设备百分比
        rightdevicePercent(){
            return (this.deviceOnline.online / this.deviceOnline.total * 100).toFixed(1) * 1
        },
        //今日巡检百分比
        todayroutingPercent(){
            return this.routingResult.dayNormal / this.routingResult.dayTotal * 100
        },
        // 本周巡检百分比
        weekroutingPercent(){
            return this.routingResult.weekNormal / this.routingResult.weekTotal * 100
        },
        // 本月巡检百分比
        monthroutingPercent(){
            return this.routingResult.monthNormal / this.routingResult.monthTotal * 100
        }
    },
    methods: {
        // 右侧边栏上部
        format(percentage) {
            return percentage === 100 ? '满' : `${percentage}%`;
        },
        //未处理预警统计
        pendingwarning() {
            request.get('/screen/warn/getUnProcessWarnRecord', {

            }, {})
                .then(res => {
                    let data_ = res.data
                    this.imgitems.forEach((item, i) => {
                        if (data_.hasOwnProperty(item.color)) {
                            let obj = item
                            obj.number = data_[item.color];
                            // console.log(obj);
                            this.$set(this.imgitems, i, obj)
                        }
                    })
                })
        },
        //对原始对象进行封装
        primarys(obj) {
            let keyArr = Object.keys(obj);
            let valueArr = Object.values(obj);
            let newArr = keyArr.map((item, i) => {
                return {
                    name: keyArr[i],
                    number: valueArr[i],
                }
            })
            return newArr
        }
    },
    created() {
        this.$nextTick(() => {
            // 执行未处理预警统计函数
            this.pendingwarning();
            //对监测点类型统计进行请求
            onepicture.monitorType()
                .then(res => {
                    let monitorArr = res.data;
                    let KeyArr = Object.keys(monitorArr);
                    let valueArr = Object.values(monitorArr);
                    let newArr = KeyArr.map((item, i) => {
                        return {
                            name: KeyArr[i],
                            number: valueArr[i],
                            img: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/滑坡.png')
                        }
                    })
                    this.disastertypes = newArr

                })
                .catch(error => {
                    console.error('Monitor type error', error)
                })
            // 对监测点区域数量进行请求
            onepicture.monitorArea()
                .then(res => {
                    // console.log(numberArr,total);
                    let arr = this.primarys(res.data)
                    let percents = arr.map((item, i) => {
                        return {
                            name: item.name,
                            percent: item.number
                        }
                    })
                    this.disasterpercents = percents
                })
                .catch(error => {
                    console.error('MonitorArea error', error);
                })
            // 请求巡检结果统计
            onepicture.routingResult()
                .then(res => {
                    this.routingResult = res.data
                })
                .catch(error =>{
                    console.error('routingResult error',error)
                })
            // 请求监测项排名
            onepicture.rank()
            .then(res =>{
                let arr = res.data;
                arr.sort((a,b)=>{
                    return a.num - b.num
                })
                // console.log(arr);
                let newArr =  arr.map((item,i)=>{
                    return {
                        serial:i,
                        type:item.NAME,
                        number:item.num,
                        percent:item.rate
                    }
                });
                this.monitorTypes = newArr
            })
            .catch(error =>{
                console.error('rank error',error)
            })
            // 请求设备在线率
            onepicture.deviceOnline()
            .then(res =>{
                // console.log(res);
                this.deviceOnline = res.data
            })
            .catch(error =>{
                console.error('device error',error)
            })
        })
    },
    mounted() {

    },
    components: {

    }
}
</script>
<style scoped lang="less">
.onepicture {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 900px;
    top: 148px;

    .containerleft {
        width: 30%;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        pointer-events: all;

        .todaynotdispose {
            width: 400px;
            height: 230px;
            background: url('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/今日未处理预警\(0\)-框.png') no-repeat center;
            background-size: 100% 100%;

            .texttitle {
                font-family: 'youshebiaoti';
                height: 30px;
                width: 100%;
                font-size: 20px;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 30px;
                text-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
                text-align: left;
                padding-left: 14px;
                padding-top: 5px;
                box-sizing: border-box;
            }

            .iconbottom {
                width: 100%;
                height: calc(100% - 30px);
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 50%;
                    height: 50%;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .left {
                        width: 50%;
                        display: flex;
                        justify-content: end;

                        img {
                            width: 50px;
                            height: 50px;
                        }
                    }

                    .right {
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        text-align: left;
                        margin-left: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;

                        .righttop {
                            font-size: 18px;
                            font-family: DIN;
                            font-weight: bold;
                            color: #FF4A54;
                        }
                    }
                }
            }
        }

        .disastertype {
            width: 400px;
            height: 230px;
            background: url('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/框-隐患点总数\(74\).png') no-repeat center;
            background-size: 100% 100%;

            .contianer {
                height: 140px;
                width: 100%;
                display: flex;
                margin-top: 70px;

                .contianerleft {
                    height: 100%;
                    width: 85%;
                    display: flex;
                    flex-wrap: wrap;

                    .item {
                        width: 50%;
                        height: 50%;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: center;

                        .left {
                            width: 50%;
                            text-align: right;
                        }

                        .right {
                            width: 50%;
                            text-align: left;
                            margin-left: 10px;

                            .righttop {
                                font-size: 18px;
                                font-family: DIN;
                                font-weight: bold;
                                color: #64C5E6;
                            }

                            .rightbottom {
                                font-size: 14px;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #8CC2FF;
                                margin-top: 3px;
                            }
                        }
                    }
                }

                .contianerright {
                    height: 100%;
                    width: 15%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .location {
            width: 400px;
            height: 400px;
            background: url('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/框-监测点区域分布.png') no-repeat center;
            background-size: 100% 100%;
            padding-top: 50px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .scrollbar-container {
                overflow: auto;

                &::-webkit-scrollbar-track {
                    background: #004B62;
                    opacity: 0.3;
                    border-radius: 3px;
                }

                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    cursor: pointer;
                    background: #176677;
                    border-radius: 3px;
                    transition: color 0.2s ease;
                }

                .item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 7px;

                    .leftname {
                        width: 25%;
                        text-align: end;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        margin-right: 3%;
                        font-weight: 400;
                        color: #FFFFFF;
                    }

                    .rightpercent {
                        width: 70%;
                        height: 10px;

                        /deep/ .el-progress-bar {

                            .el-progress-bar__outer {
                                background: rgba(0, 0, 0, 0) !important;

                                .el-progress-bar__inner {
                                    background-color: #1394A9
                                }
                            }
                        }
                    }

                }
            }







        }
    }

    .containerright {
        width: 440px;
        height: 900px;
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: end;
        pointer-events: all;

        .top {
            width: 400px;
            height: 190px;
            background: url('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/设备在线率.png') no-repeat center;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-top: 20px;
            box-sizing: border-box;
            position: relative;

            .title {
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #1BC8B7;
                position: absolute;
                left: 17%;
                top: 38%;
            }
        }

        .middle {
            width: 400px;
            height: 340px;
            background: url('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/人工巡检.png') no-repeat center;
            background-size: 100% 100%;
            padding-top: 50px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .middleitem1 {
                height: 30%;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;

                .leftcir {
                    margin-left: 30px;

                    .title {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #0096FF;
                        position: absolute;
                        top: 20%;
                        left: 17%;
                    }
                }

                .rightnumber {
                    width: 60%;
                    text-align: left;

                    .numbertop {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #9B9B9B;
                    }

                    .numberbottom {
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
            }

            .middleitem2 {
                height: 30%;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;

                .leftcir {
                    margin-left: 30px;

                    .title {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #1BC8B7;
                        position: absolute;
                        top: 20%;
                        left: 17%;
                    }
                }

                .rightnumber {
                    width: 60%;
                    text-align: left;

                    .numbertop {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #9B9B9B;
                    }

                    .numberbottom {
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
            }

            .middleitem3 {
                height: 30%;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;

                .leftcir {
                    margin-left: 30px;

                    .title {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #7069E1;
                        position: absolute;
                        top: 20%;
                        left: 17%;
                    }
                }

                .rightnumber {
                    width: 60%;
                    text-align: left;

                    .numbertop {
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #9B9B9B;
                    }

                    .numberbottom {
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
            }
        }

        .bottom {
            width: 400px;
            height: 330px;
            background: url('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/监测项排名.png') no-repeat center;
            background-size: 100% 100%;

            .box {
                width: 96%;
                height: 100%;
                overflow: auto;

                &::-webkit-scrollbar-track {
                    width: 6px;
                    height: 300px;
                    background: #004B62;
                    opacity: 0.3;
                    border-radius: 3px;
                }

                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                    width: 6px;
                    height: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    cursor: pointer;
                    background: #176677;
                    border-radius: 3px;
                    transition: color 0.2s ease;
                }

                .heightbox {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;


                    .heightboxtop {
                        width: 100%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        margin-top: 50px;
                        margin-bottom: 10px;

                        .type {
                            font-size: 14px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #9B9B9B;
                        }
                    }

                    .heightboxbottom {
                        width: 100%;
                        height: auto;
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
                        align-items: center;


                        .info {
                            width: 360px;
                            height: 30px;
                            background: #005A64;
                            opacity: 1;
                            border-radius: 4px;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            margin-bottom: 10px;
                            font-size: 14px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #FFFFFF;

                        }
                    }
                }
            }
        }
    }
}
</style>